<template>
  <n-card content-style="padding: 6px 16px;">
    <n-list>
      <n-list-item>
        <n-thing title="语言" />
        <template #suffix>
          <n-select v-model:value="form.language" :options="languageOptions" size="tiny" menu-size="tiny" :show-checkmark="false" />
        </template>
      </n-list-item>

      <n-list-item>
        <n-thing title="将文字翻译为" description="在微信聊天、网页及图片中使用翻译功能时，文字会被翻译为所选语言。" />
        <template #suffix>
          <n-select v-model:value="form.transLanguage" :options="transLanguageOptions" size="tiny" menu-size="tiny" :show-checkmark="false" />
        </template>
      </n-list-item>
    </n-list>
  </n-card>

  <n-card content-style="padding: 6px 16px;" style="margin-top: 20px;">
    <n-list>
      <n-list-item>
        <n-thing title="外观" />
        <template #suffix>
          <n-select v-model:value="form.theme" :options="themeOptions" size="tiny" menu-size="tiny" :show-checkmark="false" />
        </template>
      </n-list-item>

      <n-list-item>
        <n-thing title="字体大小" />
        <template #suffix>
          <n-slider v-model:value="form.fontSize" :marks="fontSizeMap" step="mark" style="width: 180px;" :tooltip="false" />
        </template>
      </n-list-item>
    </n-list>
  </n-card>

  <n-card content-style="padding: 6px 16px;">
    <n-list>
      <n-list-item>
        <n-thing title="以只读的方式打开聊天中的文件" description="开启后，可保护聊天中的文件不被修改" />
        <template #suffix>
          <n-switch v-model:value="form.useOnlyReadOpenFile" size="small" />
        </template>
      </n-list-item>

      <n-list-item>
        <n-thing title="显示网络搜索历史" />
        <template #suffix>
          <n-switch v-model:value="form.showNetworkSearchHistory" size="small" />
        </template>
      </n-list-item>

      <n-list-item>
        <n-thing title="聊天中的语音消息自动转成文字" />
        <template #suffix>
          <n-switch v-model:value="form.autoTranslateVoice" size="small" />
        </template>
      </n-list-item>

      <n-list-item>
        <n-thing title="使用系统默认浏览器打开第三方网页" />
        <template #suffix>
          <n-switch v-model:value="form.useDefaultBrowserOpenThirdPartyWeb" size="small" />
        </template>
      </n-list-item>

      <n-list-item>
        <n-thing title="点击截图按钮时保留当前窗口" />
        <template #suffix>
          <n-switch v-model:value="form.clickScreenshotButtonKeepWindow" size="small" />
        </template>
      </n-list-item>

      <n-list-item>
        <n-thing title="演示屏幕时隐藏微信主窗口" description="开启后，使用其他软件共享屏幕，投屏和裁屏时微信主窗口将不会显示在披济示的屏幕上。" />
        <template #suffix>
          <n-switch v-model:value="form.demonstrateScreenHideWechatMainWindow" size="small" />
        </template>
      </n-list-item>
    </n-list>
  </n-card>

  <n-card content-style="padding: 6px 16px;" style="margin-top: 20px;">
    <n-list>
      <n-list-item>
        <n-thing title="有更新时自动升级微信" />
        <template #suffix>
          <n-switch v-model:value="form.autoUpgradeWechat" size="small" />
        </template>
      </n-list-item>

      <n-list-item>
        <n-thing title="开机时自动打开微信" />
        <template #suffix>
          <n-switch v-model:value="form.openWechatWhenStartup" size="small" />
        </template>
      </n-list-item>
    </n-list>
  </n-card>

</template>

<script setup>
import { ref } from "vue";

const form = ref({
  language: 'auto',
  transLanguage: 'auto',
  theme: 'auto',
  fontSize: 20,
  useOnlyReadOpenFile: true,
  showNetworkSearchHistory: true,
  autoTranslateVoice: true,
  useDefaultBrowserOpenThirdPartyWeb: true,
  clickScreenshotButtonKeepWindow: true,
  demonstrateScreenHideWechatMainWindow: true,
  autoUpgradeWechat: true,
  openWechatWhenStartup: false
});

const languageOptions = ref([
  { value: 'auto', label: '跟随系统', },
  { value: 'zh_CN',label: '简体中文', },
  { value: 'zh_HK',  label: '繁体中文', },
  { value: 'en_US', label: '英文', }
])

const transLanguageOptions = ref([
  { value: 'auto', label: '当前微信使用的语言', },
  { value: 'zh_CN',label: '简体中文', },
  { value: 'zh_HK',  label: '繁体中文', },
  { value: 'en_US', label: '英文', }
])

const themeOptions = ref([
  { value: 'auto', label: '跟随系统', },
  { value: 'light',label: '浅色模式', },
  { value: 'dark',  label: '深色模式', },
])

const fontSizeMap = ref({
  0: "小",
  20: "标准",
  40: "",
  60: "",
  80: "",
  100: "大"
})

</script>

<style lang="scss" scoped>
@use "@/assets/css/n-list-reset.scss";
</style>

